<template>
  <div class="pay">
    <van-cell-group>
      <van-cell class="course-info">
        <img :src="course.courseImgUrl">
        <p>
          <span>{{ course.courseName }}</span>
          <span class="price">¥{{ course.discounts }}</span>
        </p>
      </van-cell>
      <van-cell class="account-info">
        <div>购买信息</div>
        <div>购买后用此账号登录可查看购买课程</div>
        <div>当前账号：{{ organization }}</div>
      </van-cell>
      <van-cell class="pay-style">
        <div>
          <span>支付方式</span>
          <van-radio-group v-model="radio">
            <van-cell-group>
              <van-cell clickable @click="radio = '1'">
                <template #title>
                  <img src="http://www.lgstatic.com/lg-app-fed/pay/images/wechat_b787e2f4.png" alt="">
                  <span>微信支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="1" />
                </template>
              </van-cell>
              <van-cell clickable @click="radio = '2'">
                <template #title>
                  <img src="http://www.lgstatic.com/lg-app-fed/pay/images/ali_ed78fdae.png" alt="">
                  <span>支付宝支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="2" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <van-button @click="handlePayAction">¥{{ course.discounts }}立即支付</van-button>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { CellGroup, Cell, Button, RadioGroup, Toast } from 'vant'
import { getCourseById } from '@/services/course'
import { saveOrder, savePayment, getPayResult } from '@/services/pay'
export default {
  components: {
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanButton: Button,
    VanRadioGroup: RadioGroup
  },
  name: 'pay',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      course: {},
      radio: '1',
      orderNo: null
    }
  },
  created () {
    this.loadCourseInfo()
    this.createOrder()
  },
  methods: {
    async handlePayAction () {
      const { data } = await savePayment({ goodsOrderNo: this.orderNo, channel: this.radio === '1' ? 'weChat' : 'aliPay', returnUrl: 'http://eduboss.lagou.com' })
      console.log(data)
      // 跳转支付页面
      window.location.href = data.content.payUrl
      // 开定时器查询支付结果
      const timer = setInterval(async () => {
        const { data: result } = await getPayResult({ orderNo: data.content.orderNo })
        // if (result.content && result.content.status === 2)
        if (result.content && result.content.status === 1) {
          // 未支付
        } else if (result.content && result.content.status === 2) {
          // 支付成功
          clearInterval(timer)
          Toast.success('支付成功')
          this.$router.push({ name: 'learn' })
        } else {
          // 支付失败
          clearInterval(timer)
          Toast.error('支付失败')
        }
      }, 1000)
    },
    async createOrder () {
      const { data } = await saveOrder({ goodsId: this.courseId })
      if (data.state === 1) {
        this.orderNo = data.content.orderNo
      }
    },
    async loadCourseInfo () {
      const { data } = await getCourseById({ courseId: this.courseId })
      console.log(data)
      if (data.state === 1) {
        this.course = data.content
      }
    }
  },
  computed: {
    organization () {
      return this.$store.state.user.organization.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1***$3')
    }
  }
}
</script>

<style lang="scss" scoped>
.pay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.van-cell-group {
  background-color: rgb(247, 248, 250);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.course-info {
  margin-bottom: 10px;
}
.course-info .van-cell__value {
  display: flex;
  padding: 30px 10px 10px;
}
.course-info img {
  width: 80px;
  height: 107px;
}
.course-info p {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 107px;
  padding: 5px 10px;
  margin: 0;
  box-sizing: border-box;
  justify-content: space-between;
}
.course-info p .price {
  font-size: 22px;
  font-weight: 700;
  color: red;
}
.account-info {
  height: 120px;
  margin-bottom: 10px;
}
.account-info div:nth-child(2) {
  font-size: 12px !important;
  color: #999;
}
.account-info div:nth-child(3) {
  margin: 20px 0 10px;
}
.pay-style {
  flex: 1;
}
.pay-style .van-cell__value{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pay-style .van-cell {
  padding: 20px 10px;
}

.van-cell__title {
  font-size: 16px;
  display: flex;
  align-items: center;
}
.pay-style img{
  margin-right: 10px;
  width: 28px;
  height: 28px;
}
::v-deep .van-radio__icon--checked .van-icon {
  background-color: yellowgreen;
  border: 0;
}
.pay-style .van-button {
  background: linear-gradient(270deg,yellowgreen,yellow);
  border-radius: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}
</style>
